<template>
  <div class="footer" v-if="flag">
    <ul>
      <li v-for="item in navs" :key="item.id">
        <router-link :to="item.path" active-class="active">
          <span :id="item.className"> </span>
          <p>{{ item.text }}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      navs: [
        { id: 1, text: "首页", path: "/home", className: "home" },
        { id: 2, text: "导览", path: "/navigation", className: "navigation" },
        { id: 3, text: "发布", path: "/publish", className: "publish" },
        { id: 4, text: "旅程", path: "/travel", className: "travel" },
        { id: 5, text: "我的", path: "/my", className: "my" },
      ],
    };
  },
  watch: {
    $route() {
      if (
        this.$route.path.indexOf("/home/") != -1 ||
        this.$route.path.indexOf("/my/") != -1 ||
        this.$route.path.indexOf("/guide/") != -1 ||
        this.$route.path.indexOf("/navigation/") != -1 ||
        this.$route.path.indexOf("/publish/") != -1 ||
        this.$route.path.indexOf("/travel/") != -1
      ) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
a.active {
  span {
    background-position-y: -6.12rem !important;
  }
  p {
    color: #4180f6 !important;
  }
}
.footer {
  width: 100%;
  height: 0.78rem;
  padding-bottom: 0.34rem;

  ul {
    width: 100%;
    height: 100%;
    display: flex;
    border-top-right-radius: 0.2rem;
    border-top-left-radius: 0.2rem;
    box-shadow: 0 -0.05rem 0.05rem 0 rgba($color: #196fe8, $alpha: 0.15);
    li {
      flex: 1;
      a {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        span {
          width: 0.32rem;
          height: 0.32rem;
          margin-bottom: 0.03rem;
          &#home {
            background: url(~Assets/img/sprite.png) no-repeat -0.03rem -6.66rem;
          }
          &#navigation {
            background: url(~Assets/img/sprite.png) no-repeat -0.73rem -6.66rem;
          }
          &#publish {
            background: url(~Assets/img/sprite.png) no-repeat -1.43rem -6.66rem;
          }
          &#travel {
            background: url(~Assets/img/sprite.png) no-repeat -2.13rem -6.66rem;
          }
          &#my {
            background: url(~Assets/img/sprite.png) no-repeat -2.87rem -6.66rem;
          }
        }
        p {
          color: #ccc;
          font-size: 0.12rem;
          line-height: 0.14rem;
        }
      }
    }
  }
}
</style>
